<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { postsApi } from '@/apis/PostsApi';
import ShineBorder from '@/components/ui/ShineBorder';
import { Promotion } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';


const params = ref({
	pageNum: 1,
	pageSize: 5,
	isTop: 0,
});
const topParams = ref({
	pageNum: 1,
	pageSize: 3,
	isTop: 1,
});
let dataList = ref([]);
let topDataList = ref([]);

const getPost = async () => {
	let res = await postsApi.getPosts(
		params.value.pageNum,
		params.value.pageSize,
		params.value.isTop
	);
	dataList.value = dataList.value.concat(res.data);
	if (res.data.length == 0) {
		ElMessage.warning('只有这些了 🙃');
	}
};

const getTopPost = async () => {
	let res = await postsApi.getPosts(
		topParams.value.pageNum,
		topParams.value.pageSize,
		topParams.value.isTop
	);
	topDataList.value = topDataList.value.concat(res.data);
};
onMounted(() => {
	getPost();
	getTopPost();
});
const getNextPage = async () => {
	params.value.pageNum += 1;
	getPost();
};
let dotEnd = ref();
function jump() {
	dotEnd.value.classList.add('jumping');
	// 在动画结束后恢复原始状态
	setTimeout(() => {
		dotEnd.value.classList.remove('jumping');
	}, 300); // 设置定时器，等待动画完成
	getNextPage();
}
</script>

<template>
	<div class="top-container">
		<ShineBorder color="rgba(77, 119, 255)" :border-radius="20" :border-width="10" :duration="10" class="top-border"
			v-if="topDataList.length > 0" v-for="(item, index) in topDataList" :key="index">
			<div class="top-item">
				<div class="top-item-time">{{ item.createTime.replace('T', ' ') }}</div>
				<div class="top-item-content" v-html="item.content"></div>
			</div>
		</ShineBorder>
	</div>
	<br>
	<div class="life-container">
		<!-- 时间轴项 -->
		<div class="life-item" v-for="(item, index) in dataList" :key="index">
			<!-- 时间显示 -->
			<div class="time-part">
				<div class="time"><el-icon><Promotion /></el-icon> {{ item.createTime.replace('T', ' ') }}</div>
				<div class="dot"></div>
			</div>

			<!-- 内容卡片 -->
			<div class="card" v-html="item.content"></div>
		</div>
		<div class="dot-end" ref="dotEnd" @click="jump">🏳‍🌈 更多</div>
	</div>
</template>

<style lang="less" scoped>
.top-container {
	display:inline-flex;
	justify-content: center;
	align-items: normal;
	gap: 5vw;
}

.top-border {
	background-color: #c2dbf4;
}





.jumping {
	/* 定义点击时的动画 */
	transform: translate(-50%, 20px) !important;
}

.dot-end {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	background: #409eff;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	transform-origin: center;
	transition: all 0.3s;
	bottom: -40px;
	color: white;
	cursor: pointer;
	caret-color: transparent;

	/* 隐藏文本光标 */
	&:hover {
		transform: scale(2) translate(-25%, 0);
	}

	// 定位到时间轴线上
}

@keyframes cardEntrance {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.card {
	width: 45%;
	min-height: 30vh;
	padding: 24px;
	background: linear-gradient(45deg,
			rgba(77, 119, 255, 0.4),
			rgba(179, 136, 255, 0.4),
			rgba(77, 119, 255, 0.4));
	border-radius: 12px;
	backdrop-filter: blur(10px);
	border: 5px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0px 0px 3vw rgba(6, 218, 229, 1);
	position: relative;
	z-index: 1;
	transition: all 3s cubic-bezier(0.4, 0, 0.2, 1);
	animation: cardEntrance 0.6s ease-out both;

	// overflow: hidden;
	// 科技感边框光效
	&::before {
		content: '';
		position: absolute;
		top: -2px;
		left: -2px;
		right: -2px;
		bottom: -2px;
		background-color: rgba(179, 233, 245, 0.409);
		z-index: -1;
		border-radius: 12px;
		animation: borderGlow 3s linear infinite;
	}

	// 动态光效
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 50%;
		height: 100%;
		background: linear-gradient(to right,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0.5) 50%,
				rgba(255, 255, 255, 1) 100%);
		transform: skewX(-15deg);
		transition: all 0.6s ease;
		opacity: 0;
	}
}

.life-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1vh;
	position: relative;
	padding: 5vh 0;
	margin-bottom: 10vh;

	// 时间轴线
	&::before {
		content: '';
		position: absolute;
		// left: 50%;
		height: 100%;
		width: 2px;
		background: #e4e7ed;
		// transform: translateX(-50%);
	}
}

.life-item {
	position: relative;
	width: 80%;
	margin: 0 auto 40px;
	display: flex;
	justify-content: space-between;

	// 交替布局
	&:nth-child(odd) {
		.time-part {
			left: 0;
			color: white;
			text-align: center;
		}

		.card {
			order: 1;
			margin-left: auto;
		}
	}

	&:nth-child(even) {
		.time-part {
			color: white;
			text-align: center;
			right: 0;
		}

		.card {
			order: -1;
			margin-right: auto;
		}
	}
}

.time-part {
	position: absolute;
	top: 0;
	width: 50%;
	color: #909399;

	.time {
		font-size: 3vw;
		margin-bottom: 8px;
		color: rgb(240, 201, 130);
	}

	.dot {
		width: 12px;
		height: 12px;
		background: #409eff;
		border-radius: 50%;
		position: absolute;
		top: 6px;

		// 定位到时间轴线上
		&::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 2px;
			background: #409eff;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

// 奇数项样式
.life-item:nth-child(odd) .dot {
	right: -6px;

	&::after {
		right: 0;
	}
}

// 偶数项样式
.life-item:nth-child(even) .dot {
	left: -6px;

	&::after {
		left: 0;
	}
}
</style>
